<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.6.8/css/layui.min.css"   />
        <link rel="stylesheet" href="../../res/css/mz.css" />
        <script src="https://cdn.staticfile.org/layui/2.6.8/layui.min.js" ></script>
        <script src="../../res/js/mz.list.js"></script>
        <script src="../../res/js/mz.common.js"></script>
    </head>
    <body>

        <div id="msg"></div>
        <br><br>

        <div style=" margin: 10px auto;">
            <a class="layui-btn layui-btn-success" href="edit.html"><i class="layui-icon layui-icon-addition"></i>新增</a>
            <button onclick="resetMapping()" class="layui-btn layui-btn-success"><i class="layui-icon layui-icon-refresh"></i>重载映射</button>
        </div>

        <div style=" margin: 10px auto;">
            <table id="table_view"></table>
        </div>

        <script type="text/html" id="operationDemo">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="view">查看</a>
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="remove">删除</a>
        </script>

        <script>

            var field_setting = [
                {title: '编号', field: 'id', type: 'text', width: 50},
                {title: '标题', field: 'title', type: 'text'},
                {title: 'sql', field: 'sql', type: 'text', width: 200},
                {title: '参数名', field: 'arg_names', type: 'text'},
                {title: 'sql类型', field: 'sql_type', type: 'text', width: 80},
                {title: '请求类型', field: 'http_methods', type: 'text', width: 100},
                {title: '请求地址', field: 'mapping_uri', type: 'text'}
                ];

            field_setting.unshift({type: 'checkbox'});

            field_setting.push({fixed: 'right', title: '操作', width: 220, align:'center', toolbar: '#operationDemo'});

            new MZList({
                elem: '#table_view',
                url: base_url + '/sql_page', //数据接口
                cols: [field_setting],
                toolbarEvents: {
                    view: {url: 'view.html'},
                    edit: {url: 'edit.html'},
                    remove: {url: base_url + '/sql_delete'}
                }
            }).bind('operation', function(obj){

                var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值


            });

            function resetMapping() {
                layui.$.post(base_context + "/resetMapping", function (data) {
                    console.log(data);
                    layer.msg(data.message);
                })
            }
        </script>

    </body>
</html>
